<template>
  <div class="myHeader" style="display: flex;justify-content: space-around;align-items: center; padding-top: 20px">
    <!--    左边的blog-->
    <div ><strong style="font-size: 38px">Blog</strong></div>
    <!--    头部导航-->
    <div class="Navigation"  >
      <ul style="display: flex">
        <li class="head_nav"><a href="http://localhost:8081/#/home" style="color: red" @click="Home">主页</a></li>
        <li class="head_nav"><a href="">生活</a></li>
        <li class="head_nav"><a href="">技术</a></li>
        <li class="head_nav"><a href="">关于我们</a></li>
      </ul>
    </div>
    <!--    搜索框-->
    <div class="Search" >
      <el-input placeholder="请输入你想要搜索的作者" class="input-with-select" style="width: 450px" v-model="SearchInfo">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
     <div style="width: 395px;position: absolute;z-index: 100" v-show="usernameList.length">
       <el-card >
         <div style="border-bottom: 1px solid rgb(0,0,0,0.2);margin-bottom: 10px" v-for="username in usernameList" :key="username.user_id"><el-link type="info" style="font-size: 16px;" :underline="false" @click="getUserId(username.user_id)">{{username.user_name}}</el-link></div>
       </el-card>
     </div>
    </div>
   
    <!--    我的头像-->
    <div class="HeadPortraits"  style="height: 50px;line-height: 50px;display: flex">
        <el-button type="danger"  icon="el-icon-edit-outline" @click="WriteNews">开始创作</el-button>
      <span class="username" style="vertical-align: top;margin-left: 30px">{{userinfo.username}}</span>
      <el-dropdown  visible-change="false" >
        <div >
        <img :src="UserHeadIon" alt="" style="width: 40px;height: 40px;border-radius: 50%;margin-left: 10px" >
        <el-dropdown-menu slot="dropdown" v-if="true" style="margin-top: -10px">
          <el-dropdown-item @click.native="aboutMe">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="Logout">退出</el-dropdown-item>
        </el-dropdown-menu>
        </div>
      </el-dropdown>
    </div>
   
  </div>

</template>
<script>
export default {
  name: "MyHeader",
  data() {
    return {
      userinfo:{
        username:''
      },
      UserHeadIon:"",
      DropdownMenu:false,
      SearchInfo:'',
      usernameList:''
    }
  },
  watch:{
    SearchInfo(newValue,oldValue){
      if(newValue.trim() && oldValue.trim()!==newValue.trim()){
       this.$api.userApi.likeName({userName:newValue}).then(value=>{
        if(value.result.length>=0){
          this.usernameList=value.result
          console.log(this.usernameList)
        }
       })
      }
      if(!newValue){
        this.usernameList=''
      }
    }
  },
  methods:{
    Home(){
      this.$router.push({name:"home"})
    },
    Logout(){
      this.$message({
        message:'成功退出',
        type:'success'
      })
      window.localStorage.clear()
      this.$router.push({name:'login'})
      this.$store.commit('Logout')
    },
    aboutMe(){
      this.$router.push({name:'myBlog'})
    },
    WriteNews(){
      this.$router.push({name:'WriteArticle'})
    },
  //  获取搜索框的用户id
    getUserId(id){
          if(this.$store.state.commitSum.userID===id){
            this.$router.push({name:'myBlog'})
          }else {
            
            this.$router.push({name:"author",query:{userId:id}})
            this.SearchInfo=""
          }
        
    }
  },
  beforeMount() {
    this.$api.userApi.userInfo({id:this.$store.state.commitSum.userID}).then(value => {
     this.userinfo.username=value.result.user_name
    })
    this.$api.userApi.userGetIcon({id:this.$store.state.commitSum.userID}).then(value => {
      if(value.user_icon){
        this.UserHeadIon=value.user_icon
      }else{
        this.UserHeadIon=require('../../public/img/Myphoto.jpg')
      }
    })
  }
}
</script>

<style scoped>
.head_nav {
  padding: 0 60px;
  font-size: 20px;
}

</style>